<template>
  <section>
    <el-button size="mini" type="primary" @click="addTabBtn" style="margin-bottom: 10px">添加tab</el-button>
    <el-tabs v-model="tabName" type="border-card" closable @tab-remove="removeTab"  v-if="tabs">
      <el-tab-pane :label="tab.title" :name="tab.name" v-for="(tab,index) in tabs" :key="index">
        <el-form size="mini" label-width="80px" inline style="border: 0px solid red">
          <el-form-item label="标签名:" style="border:0px solid red">
            <el-input size="mini" placeholder="修改标签名"  v-model="tab.title"></el-input>
          </el-form-item>
          <el-form-item label="" style="border: 0px solid red;float: right">
            <el-button size="mini" type="primary" @click="addAdBtn" >新建广告</el-button>
          </el-form-item>
        </el-form>
        <featured-box :currAds="currAds" v-if="currAds" v-on:editAdBtn="editAdBtn" v-on:delAdBtn="delAdBtn"></featured-box>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="newAdDialog" v-if="currAd" title="设置">
      <new-ad :ad="currAd" v-on:cancelDialog="successEvent"></new-ad>
    </el-dialog>
  </section>
</template>

<script>
  import newAd from '../appAd/newAd'
  import featuredBox from './featuredBox'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "newTabAd",
    components:{featuredBox,newAd},
    props:['lightBoxId'],
    data(){
      return {
        tabName:'',
        tabs:null,
        allAds:null,
        currAds:null,
        newAdDialog:false,
        currAd:null
      }
    },
    watch:{
      lightBoxId(nv,ov){
        if(nv) this.init(nv)
      },
      tabName(nv,ov){
        if(nv){
          console.log('观察tabname变动--------',nv)
          this.getAdsByTab(nv)
        }
      }
    },
    created(){
      this.init(this.lightBoxId)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(lightBoxId){
        this.getAds(0,lightBoxId)
      },
      getAds(pageNo,lightBoxId,sizeNo){
        this.fetch({name:"getAdList",data:{page:pageNo?pageNo:0,lightBoxId,size:sizeNo?sizeNo:''}})
          .then(res=>{
            if(res.content.length<=0){
              this.tabs=[]
              this.$message({type:'info',message:'当前位置无广告，请新建！'})
              return
            }
            if(res.content.length<res.totalElements){
              this.getAds(0,lightBoxId,res.totalElements)
            }else {
              console.log('灯箱下所有的ad',res.content)
              this.allAds=res.content
              this.allAds.forEach(item=>{
                if(item.img === undefined){
                  Vue.set(item,'img','')
                }
              })
              this.getTabs(this.allAds)//制作tab标签页
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getTabs(array){
        let tmp=[]
        array.forEach(a=>{
          let index = tmp.findIndex(t=>t.name === a.data.tab.name)
          if(index <0){
            tmp.push({
              name:a.data.tab.name,title:a.data.tab.title
            })
          }
        })
        this.tabs=tmp
        this.tabName = this.tabs[0].name
        console.log('看下tabs----------',this.tabs)
      },
      getAdsByTab(tabName){
        console.log('看下所有ads----',this.allAds)
        let ads=[]
        this.allAds.forEach(ad=>{
          if(ad.data.tab.name === tabName){
            ads.push(ad)
          }
        })
        this.currAds=ads
        this.newAdDialog=false
      },
      addTabBtn(){
        let tab={
          name:''+this.tabs.length,
          title:''
        }
        this.tabs.push(tab)
        this.tabName = this.tabs[this.tabs.length-1].name
        console.log('添加新标签页')
      },
      addAdBtn(){
        let tab=this.tabs.find(tab=>tab.name === this.tabName)
        this.currAd={
          contentType:null,
          contentValue:null,
          departmentId:'空',
          img:null,
          data:{tab,prices:'',discount:''},
          lightBoxId:this.lightBoxId}
        console.log('看下currad',this.currAd)
        this.newAdDialog=true
      },
      successEvent(e){
        console.log('新建或更新成功后----------',e)
        let index = this.allAds.findIndex(ad=>ad.id === e.id)
        if(index <0) this.allAds.push(e)
        this.getAdsByTab(e.data.tab.name)
      },
      editAdBtn(e){
        console.log('看一下编辑参数----------',e)
        this.currAd=e
        this.newAdDialog=true
      },
      delAdBtn(e){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAd",data:{id:e.id}})
              .then(res=>{
                this.$message({type:'success',message:'删除成功！'})
                let index = this.allAds.findIndex(ad=>ad.id === e.id)
                if(index >=0) this.allAds.splice(index,1)
                this.getAdsByTab(e.data.tab.name)
                // this.getAds(0,this.lightBoxId)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      removeTab(e){
        console.log('删除一个tab，删除tab下所有ad',e)
        let index =this.allAds.findIndex(ad=>ad.data.tab.name === e)
        if(index >= 0){//tab页下m没ad，直接删tab就行
          this.$confirm('该标签页下存在ad，请清空后再删除')
          return
        }
        this.tabs.splice(e,1)
      }
    }
  }
</script>

<style scoped>

</style>
